<template>
  <div class="home">
    <div class="home-body">
      <!-- <el-row :gutter="20">
        <el-col :span="6">
          <div class="home-content">
            <img :src="require('../assets/people.png')" class="home-body-img" alt="">  
            <div>
              <p>访客</p>
              <p>78,484</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-content">
            <img :src="require('../assets/news.png')" class="home-body-img" alt=""> 
            <div>
              <p>消息</p>
              <p>78,484</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-content">
            <img :src="require('../assets/money.png')" class="home-body-img" alt=""> 
            <div>
              <p>金额</p>
              <p>78,484</p>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="home-content">
            <img :src="require('../assets/car.png')" class="home-body-img" alt=""> 
            <div>
              <p>订单</p>
              <p>78,484</p>
            </div>
          </div>
        </el-col>
      </el-row>
      
      <el-row :gutter="18">
        <el-col :span="24"><div id="main" ref="chart" class="echarts-box"></div></el-col>
      </el-row> -->
      <!-- <el-row :gutter="18">
        <el-col :span="24"><div class="home-text">首页</div></el-col>
      </el-row> -->
    </div>
  </div>
</template>

<script lang="ts">
// import echarts from 'echarts'
import { Component, Vue, Provide } from "vue-property-decorator";
@Component({
  components: {}
})
   // 规格数组
export default class Home extends Vue {
@Provide() charts:any= ''
  learn(): void {
    // 新窗口打开
    window.open(
      "https://www.baidu.com",
      "_blank"
    );
  }
  // drawLine() {
  //   this.charts = echarts.init(this.$refs.chart as HTMLCanvasElement)
  //   this.charts.setOption({
  //     tooltip: {
  //       trigger: 'axis'
  //     },
  //     legend: {
  //       data: ['近七日收益']
  //     },
  //     grid: {
  //       left: '3%',
  //       right: '4%',
  //       bottom: '3%',
  //       containLabel: true
  //     },

  //     toolbox: {
  //       feature: {
  //         saveAsImage: {}
  //       }
  //     },
  //     xAxis: {
  //       type: 'category',
  //       boundaryGap: false,
  //     data: ["1","2","3","4","5"]
      
  //     },
  //     yAxis: {
  //       type: 'value'
  //     },

  //     series: [{
  //       name: '近七日收益',
  //       type: 'line',
  //       stack: '总量',
  //       data: ["3", "2", "4", "4", "5"]
  //     }]
  //   })
  // }
  mounted() {
    // this.$nextTick(function() {
    //   this.drawLine()
    // })
  }
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .home-body {
    height: 100%;
    text-align: center;
    // padding: 100px;
    box-sizing: border-box;
    .title {
      font-size: 32px;
      font-weight: bold;
      line-height: 60px;
    }
    .des {
      font-size: 18px;
      margin: 40px 0;
    }
    .home-text {
      background: #fff;
      font-size: 80px;
      line-height: 500px;
    }
  }
}
.home-content {
  display: flex;
  justify-content:center;
  padding: 20px;
  background: #fff;
  >div {
    font-size: 18px;
    font-weight: 800;
    margin-left: 80px;
    padding-top: 10px;
    >p:nth-child(1) {
      color: #DBDBDB;
    }
     >p:nth-child(2) {
      color: #646464;
      margin-top: 20px;
    }
  }
}
.home-body-img {
  width: 80px;
  height: 80px;
}
.echarts-box {
  width: 100%;
  height: 500px;
  background: #fff;
  margin-top: 20px;
}
canvas {
  width: 100%;
}

</style>
